<template>
  <div class="heard-card-box" v-if="UserStore.userInfo.info">
    <div class="heard-card-avatar">
      <img :src="publicUrls + 'door/heardTopBg.png'" alt="" class="heard-card-avatar-bg" />
      <t-avatar size="48px" :image="urls + UserStore.userInfo.info.coverUrl" v-if="UserStore.userInfo.info.coverUrl">
      </t-avatar>
      <t-avatar size="48px" v-else :image="publicUrls + 'assets/img/userImg.png'"></t-avatar>
      <div class="avatar-right">
        <div class="avatar-right-name">
          <div class="avatar-right-name-titles">
            <span>{{ UserStore.userInfo.info.name }}</span>
          </div>
          <div
            class="avatar-right-type"
            v-if="UserStore.curator && UserStore.curator.role !== 2 && UserStore.curator.role !== 3"
            :class="{
              'avatar-right-type1': UserStore.userInfo.info.type === 1,
              'avatar-right-type2': UserStore.userInfo.info.type === 2,
            }"
          >
            {{
              UserStore.userInfo.info.type === 0 ? '未认证' : UserStore.userInfo.info.type === 1 ? '策展人' : '管理员'
            }}
          </div>
        </div>
        <span class="avatar-right-phone">{{ UserStore.userInfo.info.phone }}</span>
      </div>
    </div>
    <div class="path-item-box">
      <div class="item" @click="handleNav('dashboard/index')">
        <div class="item-icon">
          <img :src="publicUrls + 'door/heardSetting.png'" alt="" />
        </div>
        <span>账号设置</span>
      </div>
      <div
        class="item"
        style="margintop: 4px"
        v-if="UserStore.userInfo.info.type !== 0"
        @click="handleNav('Survey/editSurvey')"
      >
        <div class="item-icon">
          <img :src="publicUrls + 'door/heardInfo.png'" alt="" />
        </div>
        <span>我的策展人信息</span>
      </div>
    </div>
    <div class="solider" v-if="UserStore.userInfo.info.type !== 1"></div>
    <div
      class="heard-card-auth"
      v-if="UserStore.userInfo.info.type === 2 && UserStore.curator.role == 1"
      :style="{ backgroundImage: `url(${getModelBg()})` }"
    >
      <t-avatar
        size="50px"
        :image="urls + UserStore.curator.logoUrl + '?imageView2/2/w/50/h/50/format/webp'"
        v-if="UserStore.curator.logoUrl"
      >
      </t-avatar>
      <div class="auth-right-edit">
        <div class="auth-right-edit-top">
          <span
            class="auth-right-edit-top-name"
            :class="{ 'auth-right-edit-top-name-2': UserStore.curator.level === 3 }"
            >{{ UserStore.curator.name }}</span
          >
          <div 
            :class="{ 'auth-type-2-btn-2': UserStore.curator.level === 3 }"
            class="auth-type-2-btn" 
            @click="handleNav('company/unitManagement')"
          >
            <span>管理</span>
            <i class="doorIcon">&#xe639;</i>
          </div>
        </div>
        <img class="auth-right-edit-top-level" :src="getModellevelBg()" alt="" />
      </div>
      <!-- <img :src="publicUrls + 'door/heardBtmBg.png'" alt="" class="bgcBox2" /> -->
      <!-- <div class="auth-type-2">
        <div class="auth-type-2-avatar">
          <div class="auth-avatar-box-card">
            <t-avatar
              size="32px"
              :image="urls + UserStore.curator.logoUrl + '?imageView2/2/w/32/h/32/format/webp'"
              v-if="UserStore.curator.logoUrl"
            >
            </t-avatar>
            <t-avatar size="32px" v-else :image="publicUrls + 'assets/img/userImg.png'"></t-avatar>
            <img
              v-if="UserStore.curator.authType > 0"
              class="auth-avatar-box-card-img"
              src="//static.jiyi.show/door/isAuthIcon.svg"
              alt=""
            />
          </div>
          <span class="heard-card-auth-name">{{ UserStore.curator.name }}</span>
        </div>

        <div class="auth-type-2-btn" @click="handleNav('company/unitManagement')">
          <span>单位管理</span>
          <i class="doorIcon">&#xe639;</i>
        </div>
      </div> -->
    </div>
    <div
      class="heard-card-auth"
      v-else-if="UserStore.userInfo.info.type === 2 && UserStore.curator.role > 1"
      :style="{ backgroundImage: `url(${getModelBg()})` }"
    >
    <t-avatar
        size="50px"
        :image="urls + UserStore.curator.logoUrl + '?imageView2/2/w/50/h/50/format/webp'"
        v-if="UserStore.curator.logoUrl"
      >
      </t-avatar>
      <div class="auth-right-edit">
        <div class="auth-right-edit-top">
          <span
            class="auth-right-edit-top-name"
            :class="{ 'auth-right-edit-top-name-2': UserStore.curator.level === 3 }"
            >{{ UserStore.curator.name }}</span
          >
        </div>
        <img class="auth-right-edit-top-level" :src="getModellevelBg()" alt="" />
      </div>
      <!-- <img :src="publicUrls + 'door/heardBtmBg.png'" alt="" class="bgcBox1" />
      <div class="auth-type-1">
        <div class="auth-avatar-box-card">
          <t-avatar
            size="32px"
            :image="urls + UserStore.curator.logoUrl + '?imageView2/2/w/32/h/32/format/webp'"
            v-if="UserStore.curator.logoUrl"
          >
          </t-avatar>
          <t-avatar size="32px" v-else :image="publicUrls + 'assets/img/userImg.png'"></t-avatar>
          <img
            v-if="UserStore.curator.authType > 0"
            class="auth-avatar-box-card-img"
            src="//static.jiyi.show/door/isAuthIcon.svg"
            alt="" 
          /> 
          
        </div>
        <span class="heard-card-auth-name">{{ UserStore.curator.name }}</span>
      </div> -->
    </div> 
    <div class="heard-card-auth heard-card-auth-b" v-else-if="UserStore.userInfo.info.type === 0">
      <img :src="publicUrls + 'door/heardBtmBg.png'" alt="" class="bgcBox0" />
      <div class="auth-type-0">
        <div class="auth-type-0-left">
          <span class="auth-type-0-left-text1">暂未认证</span>
          <span class="auth-type-0-left-text2">认证后可自由策展</span>
        </div>
        <div class="auth-type-0-right" @click="handleNav('authentication/authentications')">
          <span>立即认证</span>
          <i class="doorIcon">&#xe639;</i>
        </div>
      </div>
    </div>

    <div class="solider-btm"></div>
    <div class="path-item-box">
      <div class="item" @click="handleLogout">
        <div class="item-icon">
          <img :src="publicUrls + 'door/heardLogin.png'" alt="" />
        </div>
        <span>退出登录</span>
      </div>
    </div>
  </div>
</template> 

<script setup lang="ts">
// @ts-nocheck
import { publicUrls } from '@/utils/minxin';
import { doorUrl, workbenchUrl } from '@/utils/minxin';
import { urls } from '@/utils/request/upload';
import { removeAuthorization } from '@/api/utils';
import { useRouter } from 'vue-router'; 

const router = useRouter();
// console.log(UserStore.userInfo, UserStore.curator);

const handleNav = (url) => { 
  // router.push(url); 
  window.location.href = workbenchUrl + url;
};
const getModelBg = () => {
  let url = publicUrls + 'assets/img/cardVip' + (UserStore.curator.level + 1) + '.jpg';
  return url;
};
const getModellevelBg = () => {
  let url = publicUrls + 'assets/img/vipLevel' + (UserStore.curator.level + 1) + '.webp';
  return url;
};
const handleLogout = () => {
  // let url = window.location.href;
  //  window.location.href = doorUrl + 'login?redirect=' + url;
  UserStore.logout();
  removeAuthorization();

  // router.push({
  //   path: '/login',
  //   query: { redirect: encodeURIComponent(router.currentRoute.value.fullPath) },
  // });
};
</script>

<style lang="less" scoped>
.heard-card-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 304px;
  padding-bottom: 16px;
}
.heard-card-avatar {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 24px;
  width: 100%;
  height: 82px;
  margin-bottom: 8px;
  .heard-card-avatar-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 82px;
  }
}
.avatar-right {
  position: relative;
  z-index: 60;
  display: flex;
  // flex: 1;
  max-width: calc(100% - 60px);
  flex-direction: column;
  margin-left: 12px;
}
.avatar-right-name {
  flex: 1;
  display: flex;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  .avatar-right-name-titles {
    display: flex;
    width: calc(196px - 72px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .avatar-right-type {
    margin-left: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 62px;
    height: 22px;
    background: #f0f0f0;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.26);
    line-height: 22px;
  }
  .avatar-right-type:hover {
    background: #f5f5f5;
  }
  .avatar-right-type1 {
    background: #e62b17;

    color: #ffffff;
  }
  .avatar-right-type2 {
    background: #e62b17;

    color: #ffffff;
  }
  .avatar-right-type1:hover,
  .avatar-right-type2:hover { 
    background: #f2573f;  
  } 
}   
.avatar-right-phone {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  line-height: 22px;
  margin-top: 4px;
} 
.solider { 
  width: 272px; 
  height: 8px;
  box-shadow: inset 0px -1px 0px 0px #f0f0f0;
  margin-bottom: 12px;
}

.heard-card-auth {
   display: flex;
  align-items: center;
  position: relative;
  width: 272px;
  height: 80px;
  padding: 0px 16px;
  margin-bottom: 0px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  // margin-top: 16px;
  .bgcBox2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 272px;
    height: 100%;
  }
  .bgcBox1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 272px;
    // height: 56px;
    height: 100%;
  }
  .bgcBox0 {
    position: absolute;
    top: 0;
    left: 0;
    width: 272px;
    // height: 72px;
    height: 100%;
  }
}
.auth-type-0 {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  z-index: 66;
  width: 100%;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.auth-type-0-left {
  display: flex;
  flex-direction: column;
  .auth-type-0-left-text1 {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.59);
    line-height: 24px;
  }
  .auth-type-0-left-text2 {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.38);
    line-height: 22px;
    margin-top: 2px;
  }
}
.auth-type-0:hover {
}
.auth-type-0-right {
  display: flex;
  span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #e62b17;
    line-height: 22px;
  }
  .doorIcon {
    color: #e62b17;
    font-size: 14px;
    margin-left: 7px;
  }
}

.auth-type-2 {
  cursor: pointer;
  position: relative;
  z-index: 66;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  width: 100%;
  border-radius: 6px;
}
.auth-type-2-avatar {
  display: flex;
  align-items: center;
  span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 120px; 
    margin-left: 8px;  
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500; 
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
  }
}

.auth-type-2-btn { 
  cursor: pointer;
  span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #e62b17;
    line-height: 22px;
  }
  .doorIcon {
    color: #e62b17;
    font-size: 14px;
    margin-left: 7px;
  }
}
.auth-type-2:hover {
  border-radius: 6px;
}
.path-item-box {
  display: flex;
  flex-direction: column;
  width: 272px;
  // margin-top: 8px;
}
.item {
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 272px;
  height: 44px;
  padding: 10px 16px;
  border-radius: 4px;
  .item-icon {
    width: 16px;
    height: 16px;
    img {
      width: 16px;
      height: 16px;
    }
  }
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
    margin-left: 12px;
  }
}
.item:hover {
  background: #f5f5f5;
}
.solider-btm {
  width: 272px;

  height: 12px;
  box-shadow: inset 0px -1px 0px 0px #f0f0f0;
  margin-bottom: 8px;
}
.auth-type-1 {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 66;
  width: 272px;
  height: 56px;
  padding: 12px 16px;
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  span {
    width: 120px;
    margin-left: 8px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.heard-card-auth-name {
  flex: 1;
  // max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.heard-card-auth-name1 {
  max-width: 120px;
}
.auth-avatar-box-card {
  position: relative;
  width: 32px;
  height: 32px;
}
.auth-avatar-box-card-img {
  position: absolute !important;
  right: -2px;
  bottom: -2px;
  width: 16px !important;
  height: 16px !important;
  z-index: 20;
} 
.auth-right-edit {
  flex: 1;
  margin-left: 12px;
}
.auth-right-edit-top {
  display: flex;
  align-items: center; 
  width: 100%;  
} 
.auth-right-edit-top-name {
  max-width: 120px;
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
}

.auth-right-edit-top-level {
  height: 24px;
  margin-top: 2px;
}
.auth-right-edit-top-name-2 {
  font-size: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  line-height: 24px;
  background: linear-gradient(129deg, #faebdb 0%, #ffe9d7 51%, #f0cdb5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-type-2-btn {
  margin-left: 8px;
}
.auth-type-2-btn-2 {
  color: #ffffff !important;
  span {
    color: #ffffff !important;
  }
  .doorIcon {
    color: #ffffff;
  }
}
.heard-card-auth-b{ 
  position: relative;    
  display: flex;
  width: 272px;  
  height: auto !important;  
  min-height: 40px;
    overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
   padding: 0px 16px;
}
</style>
